<template>
  <div class="main-s" id="root">
    <div class="toph"></div>
    <div class="shuoming">
      <!-- {{ description }} -->
      喜迎党的二十大、共庆建团百年，“青春向党
      百年如歌——我的青春在芒果”五四青年活动在湖南广电浓情开展，全体芒果青年共同栽下青春之树，深情讲述青春故事。
    </div>
    <div class="search" @click="toSearch">
      <div class="search-icon"></div>
      <input type="text" placeholder="搜索部门、姓名" disabled />
    </div>
    <div class="bumeng">
      <div
        class="b-box"
        v-for="(item, index) in pinDaoList"
        :key="index"
        :id="item.id"
        :data-index="index"
        :data-id="item.companyName"
        @click="toPinDao"
      >
        {{ item.companyName }}
      </div>
    </div>
    <div class="both" :style="{ height: isPlaying ? '95px' : '20px' }"></div>
  </div>
</template>
<script>
import { onMounted, reactive, computed, onUnmounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter,useRoute } from "vue-router";

export default {
  name: "pindao",
  setup(props, ctx) {
    const router = useRouter();
    const route = useRoute();
    const store = reactive(useStore());
    const state = store.state;
    const scene = route.query && route.query.scene ? route.query.scene : state.scene
    const intervalId = ref();
    store.dispatch("getDeps");
    store.dispatch("getResources");
    store.dispatch("getPlayList");
    store.dispatch("getWebList", []);
    intervalId.value = setInterval(function () {
      store.dispatch("getPlayList");
    }, 1000);
    if(route.query.scene) sessionStorage.setItem('scene',route.query.scene)
    const pinDaoList = computed(() => {
      return state.pinDaoList.data;
    });
    const description = computed(() => {
      return state.description;
    });
    const listnum = computed(() => {
      return state.playList[scene].length;
    });

    const isPlaying = computed(() => {
      return state.isPlaying;
    });
    const toPinDao = (e) => {
      router.push({
        name: "audioList",
        query: {scene:scene, id: e.target.dataset.id },
      });
    };
    onMounted(() => {
      let playParam = {
        isPlaying: false,
        playIngNo: 0,
      };
      if (
        state.playList &&
        state.playList[scene] &&
        state.playList[scene].length > 0
      ) {
        playParam.isPlaying = true;
      }
      store.commit("setPlayer", playParam);
    });
    onUnmounted(() => {
      intervalId.value && clearInterval(intervalId.value);
    });
    const toSearch = () => {
      router.push({
        name: "audioList",
        query: {scene:scene, search: true, id: pinDaoList.value[0].companyName },
      });
    };
    return {
      description,
      pinDaoList,
      toPinDao,
      toSearch,
      listnum,
      isPlaying,
    };
  },
};
</script>
<style lang="scss">
.main-s {
  height: 100%;
  padding: 0;
  margin: 0;
  // background: url(../images/bg_s.png) no-repeat center 0 #d81519;
  background-size: 100%;
  .toph {
    height: 186px;
  }
  .both {
    height: 186px;
    height: 95px;
  }
  .shuoming {
    margin: 0 auto;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, #fb4c4e, transparent);
    border-radius: 15px;
    padding: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 22px;
    width: 360px;
    text-align: left;
  }
  .search {
    margin: 6px auto auto auto;
    height: 36px;
    background: #b71315;
    width: 360px;
    border-radius: 36px;
    overflow: hidden;
    text-align: center;
    position: relative;
    input {
      border: 1px solid #b71315;
      background: #b71315;
      height: 34px;
      width: 290px;
      outline: none;
      color: white;
      font-size: 14px;
    }
    .search-icon {
      background: url(../images/icon-search.png) no-repeat;
      height: 22px;
      width: 22px;
      position: absolute;
      left: 12px;
      top: 11px;
    }
    input::placeholder {
      color: #cccccc;
    }
  }
  .bumeng {
    box-sizing: border-box;
    margin: 10px auto auto auto;
    display: flex;
    color: white;
    line-height: 48px;
    text-align: center;
    padding: 0 10px;
    width: 360px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 12px;
    .b-box:nth-child(odd) {
      background: url(../images/btn-company-left.png) no-repeat;
      width: 169px;
      height: 48px;
      margin-top: 20px;
    }
    .b-box:nth-child(even) {
      background: url(../images/btn-company-right.png) no-repeat;
      width: 169px;
      height: 48px;
      margin-top: 20px;
    }
  }
}
</style>
